<template>
	<view>
		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll" :style="{height: scrollerHeight + 'px'}"
			 @refresherpulling="onPulling"
			 refresher-enabled="true">
			<template v-if="listData && listData.length > 0"> -->
				<view class="scroll-view-item" v-for="(item, index) in listData" :key="index">
					<view class="view-item__top flex">
						<view class="view-item__user flex">
							<view class="avater">
								<image v-if="item.avatar && item.avatar != ''" 
									style="width: 100%; height: 100%;" :src="item.avatar" />
							</view>
							<view class="user_info flex">
								<h2 class="main-text-color font28">{{item.orchardName}}</h2>
								<view class="address flex">
									<span class="span-svg">
										<img class="svg-img" src="@/static/images/location.svg" alt="">
									</span>
									{{item.city}}
								</view>
							</view>
						</view>
						<!-- <view class="view-item__share flex" v-if="tabId != 6">
							<span class="sprite sprite-share_small"></span>
							带货
						</view> -->
					</view>
					<view class="view-item__con" >
						<template>
							<h2 class="main-text-color font28"@click.stop="chooseHandle(item.id)"><!-- <span class="sale" v-if="item.sale">{{item.sale}}</span> -->
								{{item.productName}}
							</h2>
							<p class="subinfo" v-if="item.productDesc">{{item.productDesc}}</p>
							<view class="norms__warp flex">
								<view class="norms">规格：{{item.sku}}</view>
								<view class="price font28" v-if="item.payPrice"><span class="symbol">￥</span>{{item.payPrice.toFixed(2)}}</view>
							</view>							
						</template>
						<view class="img-list flex" @click.stop="chooseHandle(item.id)">
							<template v-if="item.carousel && item.carousel.length > 1">
								<span v-for="(img,i) in item.carousel" :key="i">
									<image v-if="img" style="width: 100%; height: 100%;" :src="img" />
								</span>
							</template>
							<template v-else>
								<span>
									<image style="width: 100%; height: 100%;" :src="item.productImage" />
								</span>
							</template>
						</view>
						<view class="collect__data flex" v-if="tabId != 6">
							<view class="comments flex">
								<span class="span-svg">
									<img class="svg-img" src="@/static/images/news_small.svg" alt="">
								</span>
								<span v-if="item.saleTotal > 0">
									{{item.saleTotal}}
								</span>
							</view>
							<view class="comments flex">
								<span class="span-svg" v-if="item.isCollect" @click="addCollect(item)">
									<img class="svg-img" src="@/static/images/collect2-active.svg" alt="">
								</span>
								<span v-else class="span-svg" @click="addCollect(item)">
									<img class="svg-img" src="@/static/images/collect2.svg" alt="">
								</span>
								<span class="span-text" v-if="item.collectCount > 0">{{item.collectCount}}</span>
							</view>
							<view class="comments flex">
								<span class="span-svg" v-if="item.isLike" @click="addLike(item)">
									<img class="svg-img" src="@/static/images/like2-active.svg" alt="">
								</span>
								<span v-else class="span-svg" @click="addLike(item)">
									<img class="svg-img" src="@/static/images/like2.svg" alt="">
								</span>
								<span class="span-text" v-if="item.likeCount > 0">{{item.likeCount}}</span>
							</view>
							<view class="comments flex" style="margin-right: 0px;margin-left: 100rpx;color: #F8741E;font-size: 24rpx;font-weight: 600;" v-if="item.stock <= 1 ">即将上市</view>
						</view>
					</view>
				</view>
		<!-- 	</template>
		    <template v-else>
				<view style="width: 100%; margin-top: 15px; text-align: center; color: #868181">暂无数据</view>
			</template>
		</scroll-view> -->
	</view>
</template>

<script>
	
	import $H from '@/common/free-lib/request.js';
	
	export default {
		props: {
			listData:{
				type: Array,
				default: () => {
					return []
				}
			},
			scrollerHeight: {
				type: [Number, String],
				default: 500
			},
			choose: {
				type: Boolean,
				dufault: false
			},
			tabId: {
				type: [Number, String],
				default: 1
			},
		},
		data () {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		computed: {
			
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			addCollect(item) {
				$H.post('/member/like/addCollect', {spuId: item.id}).then(res => {
					if(res == 1) {
						if(item.isCollect) {
							item.collectCount -= 1;
							item.isCollect = false;
						}
						else {
							item.collectCount += 1;
							item.isCollect = true;
						}							
					}
				})			
			},
			addLike(item) {
				$H.post('/member/like/addLike', {spuId: item.id}).then(res => {
					if(res == 1) {
						if(item.isLike) {
							item.likeCount -= 1;
							item.isLike = false;
						}
						else {
							item.likeCount += 1;
							item.isLike = true;
						}
					}
				})
				
			},
			lower: function(e) {
				// console.log(111)
				this.$emit('loadMore');
			},
			scroll: function(e) {
				// console.log(2222)
				this.old.scrollTop = e.detail.scrollTop
			},
			chooseHandle(id) {
				this.$emit('chooseHandle', id);
			},
			onPulling() {
				this.$emit('onPullingHandle');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view-item {
		padding: 20rpx;
		padding-right: 24rpx;
		height: auto;
		margin-top: 16rpx;
		position: relative;
		background: #fff;
		padding-bottom: 20px;
		
		.view-item__top {
			justify-content: space-between;
			
			.avater {
				width: 100rpx;
				height: 100rpx;
				border-radius: 200px;
				margin-right: 14rpx;
				overflow: hidden;
			}
			.user_info {
				flex-direction: column;
				justify-content: center;
				
				h2 {
					line-height: 40rpx;
				}
				.address {
					margin-top: 10rpx;
					height: 33rpx;
					line-height: 33rpx;
					font-size: 24rpx;
					color: #999;
					align-items: center;
					gap: 8rpx;
					
					.span-svg {
						display: block;
						width: 12px;
						
						.svg-img {
							display: block;
							width: 100%;
						}
					}
				}
			}
			.view-item__share {
				font-size: 24rpx;
				color: #F8741E;
				border: 1px solid #F8741E;
				padding: 0 20rpx;
				border-radius: 200px;
				height: 50rpx;
				align-items: center;
				span {
					display: block;
					margin-right: 8rpx;
				}
			}
		}
		.view-item__con {
			margin-top: 14rpx;
			
			h2 {
				line-height: 40rpx;
			}
			.sale {
				display: inline-block;
				height: 30rpx;
				line-height: 26rpx;
				color: #FD5052;
				border-radius: 6rpx;
				border: 1px solid #FD5052;
				margin-right: 8rpx;
				font-size: 24rpx;
				padding: 0 8rpx;
			}
			.subinfo {
				color: #555;
				height: 33rpx;
				line-height: 33rpx;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
			.norms__warp {
				margin-top: 10rpx;
				justify-content: space-between;
				height: 40rpx;
				align-items: center;
				
				.norms {
					font-size: 24rpx;
					color: #999999;
				}
				.price {
					font-weight: bold;
					color: #FD5052;
					
					.symbol {
						font-weight: normal;
						font-size: 24rpx;
					}
				}
			}
			.img-list {
				margin-top: 13rpx;
				
				span {
					width: 33.33333333%;
					height: auto;
					border-radius: 8rpx;
					margin-right: 10rpx;
					aspect-ratio: 1/1;
					
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
			.collect__data {
				position: relative;
				margin-top: 25rpx;
				padding-left: 30rpx;
				
				.comments {
					height: 33rpx;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
					margin-right: 100rpx;
					gap: 14rpx;
					
					.span-svg {
						width: 16px;
						height: 16px;
					}
					.svg-img {
						display: block;
						width: 100%;
						height: 100%;
					}
					.span-text {
						font-size: 14px;
					}
				}
				.add {
					position: absolute;
					top: -6rpx;
					right: 0;
				}
			}
		}
		
	}
	.hot-sales-item {
		background: #fff;
		
		.item {
			height: 75rpx;
			padding-right:30rpx;
			justify-content: space-between;
			align-items: center;
			
			.ranking {
				width: 90rpx;
				font-size: 30rpx;
				color: #666;
				justify-content: center;
				align-items: center;
				
				i {
					display: block;
				}
			}
			.name {
				font-size: 30rpx;
			}
			.ranking__num {
				color: #666;
			}
		}
	}
</style>
